<template>
	<view>
		<u-navbar :is-back="false" :is-fixed="true" title="" title-color="#fff" back-icon-color="#ffffff"
			:back-text-style="{color: '#fff'}" :background="nav_background" back-icon-name="nav-back">
			<view class="navbar-right" style="padding-left:48rpx;color:#FFF;">
				<view class="dot-box right-item">
					<u-icon name="shopping-cart" color="#ffffff" size="38" style="margin-right:.5em;"></u-icon>
					<text class="map-wrap-text" style="margin-right:.5em;">购物车 </text>
					<text class="right"> ✔ ︎选择需要结算的商品</text>
				</view>
			</view>
		</u-navbar>
		
		<u-alert-tips :show="show" type="warning" title="配送说明" :description="shop.delivery_introduction" v-if="shop.delivery_introduction" @close="show = false" :close-able="true"></u-alert-tips>

		<view class="page-box">
			<view class="order" :class="{selected:item.selected}" v-for="(item, index) in  orderList" :key="item.id">
				<view class="item">
					<view class="left" style="margin-right: 0;">
						<u-checkbox @change="checkboxChange" shape="cirle" v-model="item.selected" :name="item.id">
						</u-checkbox>
					</view>
					<view class="left cover">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="title u-line-2">{{ item.item_name }}</view>
						<view class="type">
							<view class="price left" style="color:red;">
								￥{{ priceInt(item.unit_price) }}
								<text class="decimal">.{{ priceDecimal(item.unit_price) }}</text>
							</view>
						</view>
						<view class="delivery-time right">
							<u-number-box v-model="itemQty[item.id]" @change="numChange" :index="item.id">
							</u-number-box>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="calculation">
			<view style="flex:1">
				<text>合计：<text style="color:red;font-weight: bold;">{{selectedPrice.toFixed(2)}}</text> 元</text><br>
				<text v-if="estmatedDiscount>0">预计可用店铺红包抵扣 <text style="color:red;font-weight: bold;">{{estmatedDiscount.toFixed(2)}}</text>元</text>
			</view>
			<view>
				<u-button type="error" @click="checkout" :disabled="selectedQty==0">结算({{selectedQty}})</u-button>
			</view>

		</view>
		<wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav_background: {
					backgroundImage: 'linear-gradient(45deg, rgb(28 79 187), rgb(167 33 33))'
				},
				pageTitle: '中勘石油微商城',
				orderList: [],
				loadStatus: ['loadmore', 'loadmore', 'loadmore', 'loadmore'],
				selectedOrder: '',
				shop: {},
				user: {},
				itemQty: [],
				show: true
			}
		},
		computed: {
			// 价格小数
			priceDecimal() {
				return val => {
					if (val !== parseInt(val)) return val.slice(-2);
					else return '00';
				};
			},
			// 价格整数
			priceInt() {
				return val => {
					if (val !== parseInt(val)) return val.split('.')[0];
					else return val;
				};
			},
			selectedQty() {
				let qty = 0;
				for (let i = 0; i < this.orderList.length; i++) {
					if (this.orderList[i].selected) {
						qty += this.orderList[i].quantity;
					}
				}
				return qty;
			},
			selectedPrice() {
				let price = 0;
				for (let i = 0; i < this.orderList.length; i++) {
					if (this.orderList[i].selected) {
						price += this.orderList[i].quantity * this.orderList[i].unit_price;
					}
				}
				return price;
			},
			estmatedDiscount() {
				if (this.user.shop_wallet<=0 || this.shop.wallet_discount<=0) {
					return 0;
				}
				if (this.selectedPrice <= 0) {
					return 0;
				}
				let maxDiscount = this.selectedPrice * parseFloat(this.shop.wallet_discount) / 100;
				if (maxDiscount <= this.user.shop_wallet) {
					return maxDiscount;
				}
				return parseFloat(this.user.shop_wallet);
			}
		},
		onShow() {
			this.getCart();
			this.getShop();
			this.getUser();
		},
		methods: {
			openPage(jumpURL, params = {}) {
				this.$u.route({
					type: 'to',
					params: params,
					url: jumpURL,
					animationType: 'slide-in-bottom'
				});
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e);
				this.$u.post('/shopping/modify-cart', {
					cart_id: e.name,
					selected: e.value ? 1 : 0,
					act: 'selected'
				}).then(res => {
					console.log(res)
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
						res[i].selected = res[i].selected ? true : false;
					}
					this.orderList = res;
					// if (qty > 0) {
					// 	uni.setTabBarBadge({
					// 		index: 1,
					// 		text: qty.toString()
					// 	})
					// } else {
					// 	uni.removeTabBarBadge({
					// 		index: 1
					// 	})
					// }
				}).catch(e => {

				})
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e);
			},
			// 全选
			checkedAll() {
				this.orderList.map(val => {
					val.selected = true;
				})
			},
			getShop() {
				this.$u.post('/shopping/shop-setting', {}).then(res => {
					this.shop = res;
				}).catch(e => {

				})
			},
			getUser() {
				this.$u.post('/user/info', {}).then(res => {
					this.user = res;
				}).catch(e => {

				})
			},
			getCart() {
				this.$u.post('/shopping/cart-list', {}).then(res => {
					console.log(res)
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
						this.itemQty[res[i].id] = res[i].quantity;
						res[i].selected = res[i].selected ? true : false;
					}
					this.orderList = res;
					// if (qty > 0) {
					// 	uni.setTabBarBadge({
					// 		index: 1,
					// 		text: qty.toString()
					// 	})
					// } else {
					// 	uni.removeTabBarBadge({
					// 		index: 1
					// 	})
					// }
				}).catch(e => {

				})
			},
			selectItem(itemId) {
				console.log(itemId)
				for (let i = 0; i < this.orderList.length; i++) {
					if (this.orderList[i].id == itemId) {
						this.orderList[i].selected = !this.orderList[i].selected;
						break;
					}
				}
			},
			checkout(){
				let cart = [];
				for(let i=0;i<this.orderList.length;i++){
					if(this.orderList[i].selected){
						cart.push(this.orderList[i].id)
					}
				}
				if(cart.length===0){
					return false;
				}
				this.$u.post('/shopping/checkout', {cart:cart.join(',')}).then(res => {
					console.log(res)
					if(res.id){
						this.openPage('/pages/ucp/order-detail',{id:res.id})
					}
				}).catch(e => {
					console.log(e)
				})
			},
			numChange(e) {
				if (e.value == 0) {
					// 提示会删除
				}
				for (let i = 0; i < this.orderList.length; i++) {
					if (this.orderList[i].id === e.index) {
						if (this.orderList[i].quantity === e.value) {
							console.log(this.orderList[i].quantity)
							return;
						}
					}
				}
				this.$u.post('/shopping/modify-cart', {
					cart_id: e.index,
					quantity: e.value,
					act: 'quantity'
				}).then(res => {
					console.log(res)
					let qty = 0;
					for (let i = 0; i < res.length; i++) {
						qty += res[i].quantity;
						res[i].selected = res[i].selected ? true : false;
					}
					this.orderList = res;
					// if (qty > 0) {
					// 	uni.setTabBarBadge({
					// 		index: 1,
					// 		text: qty.toString()
					// 	})
					// } else {
					// 	uni.removeTabBarBadge({
					// 		index: 1
					// 	})
					// }
				}).catch(e => {

				})
			}
		}
	}
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		border: 1px solid #FFF;

		.top {
			display: flex;
			justify-content: space-between;

			.left {
				display: flex;
				align-items: center;

				.store {
					margin: 0 10rpx;
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.right {
				color: $u-type-warning-dark;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0;

			.left {
				margin-right: 20rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 10rpx;
				}
			}

			.content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.title {
					font-size: 28rpx;
					line-height: 50rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 24rpx;
					color: $u-tips-color;
				}

				.delivery-time {
					color: #e5d001;
					font-size: 24rpx;
				}
			}

			.right {
				margin-left: 10rpx;
				padding-top: 20rpx;
				text-align: right;

				.decimal {
					font-size: 24rpx;
					margin-top: 4rpx;
				}

				.number {
					color: $u-tips-color;
					font-size: 24rpx;
				}
			}
		}

		.total {
			margin-top: 20rpx;
			text-align: right;
			font-size: 24rpx;

			.total-price {
				font-size: 32rpx;
			}
		}

		.bottom {
			display: flex;
			margin-top: 40rpx;
			padding: 0 10rpx;
			justify-content: space-between;
			align-items: center;

			.btn {
				line-height: 52rpx;
				width: 160rpx;
				border-radius: 26rpx;
				border: 2rpx solid $u-border-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-type-info-dark;
			}

			.evaluate {
				color: $u-type-warning-dark;
				border-color: $u-type-warning-dark;
			}
		}
	}

	.order.selected {
		border: 1px solid #d6be6e;
		box-sizing: border-box;
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, rgba(249, 116, 90, 1) 0%, rgba(255, 158, 1, 1) 100%);
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.calculation {
		position: sticky;
		display: block;
		bottom: var(--window-bottom);
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		background-color: #e8e8e8;
		border-top: 2rpx solid #EEEEEE;
		display: flex;
		flex-direction: row;
		align-items: center;

		.u-button {
			width: 6em;
		}
	}
</style>
